<template>
  <!-- 新增报修页面 -->
  <view>
    <!-- 整个box -->
    <view class="box">
      <!-- 业主信息 -->
      <view class="box1">
        <view>
          <view class="text">业主姓名：</view>
          <view>{{userInfo.name}}</view>
        </view>
        <view>
          <view class="text">手机号码：</view>
          <view>{{userInfo.tel}}</view>
        </view>
        <view>
          <view class="text">家庭住址：</view>
          <view>{{userInfo.address}}</view>
        </view>
      </view>
      <!-- 报修信息 -->
      <view class="box2">
        <view style="font-size: large;font-weight: bold;color: #6A6A6A;">报修信息</view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">报修类型：</view>
          <view class="input"><input type="text" v-model="type" placeholder="请输入报修类型"></view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">报修区域：</view>
          <view class="input"><input type="text" v-model="area" placeholder="请输入报修区域"></view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">具体描述：</view>
          <view style="width: 430rpx;">
            <u--textarea style="width: 430rpx;" v-model="detail" placeholder="请输入具体描述" count maxlength="150"
              autoHeight border="bottom"></u--textarea>
          </view>
        </view>
        <view>
          <view class="text">故障图片</view>
          <view>
            <u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="3">
            </u-upload>
          </view>
        </view>
      </view>
      <view class="submit" style="" @click="addRepair">提交</view>
    </view>
  </view>
</template>

<script>
  //获取应用实例
  const app = getApp()
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {mapState,mapMutations,mapGetters} from 'vuex'
  export default {
    data() {
      return {
        type:'',
        area:'',
        detail:'',
        fileList3: [],
      };
    },
    computed: {
      // 将 m_user 模块中的 userType userInfo 等数据映射到当前页面中使用
      ...mapState('m_user', ['userType','userInfo']),
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        console.log(event.name)
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
           console.log("result===============================>>>>>>>>>>>>>>>>>>>")
          console.log(result)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        console.log("url==============================>>>>>>>>>>")
        console.log(url)
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: app.globalData.baseUrl+'/qiniu/testUpload', // Spring Boot接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data)
              }, 1000)
            }
          });
        })
      },
      async addRepair(){
        // type:'',
        // area:'',
        // detail:'',
        if(this.type!=='' && this.area!=='' && this.detail!=='' && this.fileList3.length!==0){//若输入不为空
          var repair={};
          repair.type=this.type;
          repair.repairArea=this.area;
          repair.detail=this.detail;
          var imgstr='';
          // for(var i=0;i<this.fileList3.length;i++){
          //保证最多上传3个文件
          const len=this.fileList3.length>3 ? 3 : this.fileList3.length
          for(var i=0;i<len;i++){
            imgstr+=this.fileList3[i].url+';'//多个url之间用 ; 分割
          }
          repair.img=imgstr;
          repair.uid=this.userInfo.id;
          repair.status='新任务';
          repair.releaseTime=uni.$getDateTime(new Date());
          // 发起网络请求  保存数据
          const {data: res} = await uni.$http.post('/repair/addrepair',repair)
          // 网络请求错误
          if (res.status !== 200) return uni.$showMsg()
          uni.$showMsg("提交报修成功")
          setTimeout(() => {
            console.log("跳转页面")
            uni.switchTab({
              url: '/pages/repair/repair'
            });
          }, 1000)
        }else{//输入为空
          uni.$showMsg("报修类型、区域、具体描述和图片不能为空");
          this.type='';
          this.area='';
          this.detail='';
        }
      },
      
      
    },
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }

  .img {
    width: 200rpx;
    height: 200rpx;
    border: solid 2px #666666;
  }

  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
